<template>
    <div class="container">
        <div class="row">
            <div class="title">我的说说</div>
        </div>
        <div class="box">
            <div class="left">
                <textarea class="content" v-model="content"></textarea>
                <!-- 图标按钮 -->
                <label for="fileInput" class="file-label">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-paizhao"></use>
                    </svg>
                </label>
                <!-- 文件输入框 -->
                <input type="file" id="fileInput" class="file-input" @change="handleFileUpload" accept="image/*"
                    encType="multipart/form-data" multiple>
                <div class="preview-container" id="preview-container">
                    <!-- 图片预览 -->
                    <div v-for="(file, index) in fileList" :key="index" class="preview-item">
                        <img :src="file.url" alt="" class="preview-img" @click="editImage(index)">
                        <button @click="removeImage(index)" class="delete-btn">删除</button>
                        <!-- <button @click="editImage(index)" class="edit-btn">编辑</button> -->

                        <!-- 识别状态指示器 -->
                        <div class="recognition-status" v-if="file.isRecognizing">
                            识别中...
                        </div>
                        <div class="recognition-error" v-else-if="file.recognitionError">
                            {{ file.recognitionError }}
                        </div>

                        <!-- 标签显示区域 -->
                        <div class="tags-container" v-if="file.tags && file.tags.length">
                            <span class="tag" v-for="(tag, tagIndex) in file.tags" :key="tagIndex">
                                {{ tag }}
                            </span>
                        </div>
                    </div>
                </div>
                <div>
                    <el-button type="primary" @click="uploadImages">发表</el-button>
                </div>
            </div>
            <div class="right">
                <div class="info">
                    <img class="avatar" :src="info.avatar" alt="">
                    <div>
                        <p class="name">{{ info.name }}</p>
                        <p class="desc">
                            <span>{{ info.shuoshuo_count }}</span>
                            条说说
                        </p>
                    </div>
                </div>
                <div class="tip1">
                    <p class="p1">评论审核</p>
                    <p class="p2">开启评论审核后，非好友对您说说的回复经过审核才能显示</p>
                    <p class="p3">当前待审核评论 (0)</p>
                </div>
                <div class="tip2">
                    <p class="p1">说说使用帮助</p>
                    <p class="p2">温馨提醒：</p>
                    <p class="p3">若有修改QQ密码会清除定时说说发表，需要重新设置定时说说</p>
                </div>
            </div>
        </div>

        <!-- 图片编辑模态框 -->
        <div class="image-edit-modal" v-if="showEditModal" @click.self="closeEditModal">
            <div class="modal-content">
                <div class="edit-area">
                    <!-- 编辑区域 -->
                    <div class="edit-container">
                        <img ref="editImageRef" :src="currentImageUrl" class="edit-image" v-show="!isEditing">
                        <canvas ref="canvas" class="edit-canvas" v-show="isEditing"></canvas>
                    </div>
                </div>

                <div class="toolbar">
                    <div class="tool-options">
                        <button @click="setTool('crop')" :class="{ active: currentTool === 'crop' }">
                            裁剪 <span v-if="currentTool === 'crop'">({{ cropAspectRatio === 1 ? '正方形' : '自由' }})</span>
                        </button>
                        <button @click="toggleCropShape" v-if="currentTool === 'crop'" class="shape-toggle">
                            切换形状
                        </button>
                        <button @click="setTool('text')" :class="{ active: currentTool === 'text' }">文字</button>
                        <button @click="setTool('draw')" :class="{ active: currentTool === 'draw' }">画笔</button>
                        <button @click="setTool('filter')" :class="{ active: currentTool === 'filter' }">滤镜</button>
                    </div>

                    <div class="action-buttons">
                        <button @click="confirmCrop" v-if="currentTool === 'crop'" class="confirm-btn">确认裁剪</button>
                        <button @click="confirmDrawing" v-if="currentTool === 'draw'" class="confirm-btn">确认画笔</button>
                        <button @click="saveEditedImage" class="save-btn">保存</button>
                        <button @click="closeEditModal" class="cancel-btn">取消</button>
                    </div>
                </div>

                <!-- 文字输入框 -->
                <div v-if="showTextInput" class="text-input-container">
                    <input v-model="textInput" placeholder="输入文字" class="text-input">
                    <div class="text-options">
                        <label>大小:</label>
                        <input type="range" v-model="textOptions.size" min="10" max="72">
                        <label>颜色:</label>
                        <input type="color" v-model="textOptions.color">
                        <label>字体:</label>
                        <select v-model="textOptions.font">
                            <option>Arial</option>
                            <option>Verdana</option>
                            <option>Georgia</option>
                            <option>Courier New</option>
                        </select>
                    </div>
                    <button @click="addTextToCanvas" class="confirm-btn">添加</button>
                    <button @click="showTextInput = false" class="cancel-btn">取消</button>
                </div>

                <!-- 画笔选项 -->
                <div v-if="currentTool === 'draw'" class="draw-options">
                    <div class="option-group">
                        <label>大小:</label>
                        <input type="range" v-model="brushSize" min="1" max="20">
                        <span>{{ brushSize }}px</span>
                    </div>
                    <div class="option-group">
                        <label>颜色:</label>
                        <input type="color" v-model="brushColor">
                    </div>
                </div>

                <!-- 滤镜选项 -->
                <div v-if="currentTool === 'filter'" class="filter-options">
                    <button v-for="filter in filters" :key="filter.name" @click="applyFilter(filter.type)"
                        :class="{ active: currentFilter === filter.type }">
                        {{ filter.name }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref, nextTick } from "vue";
import { useStore } from 'vuex'
import api from '../../../api/index.js'
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.min.css';

import axios from 'axios';

const store = useStore()

// 用户信息
const info = reactive({});

// 图片文件列表
const fileList = ref([]);

// 发布的说说的文字内容
const content = ref('');

// 图片编辑功能
const showEditModal = ref(false);
const currentTool = ref(null);
const showTextInput = ref(false);
const textInput = ref('');
const brushSize = ref(5);
const brushColor = ref('#000000');
const currentEditingIndex = ref(-1);
const canvas = ref(null);
const cropper = ref(null);

const previewImage = ref(null);
const currentImageUrl = ref('');
const editImageRef = ref(null); // 修改变量名，添加Ref后缀
const cropAspectRatio = ref(1); // 1为正方形，NaN为自由比例
const currentFilter = ref(null);
const isEditing = ref(false); // 是否正在编辑

const filters = [
    { name: '灰度', type: 'grayscale' },
    { name: '怀旧', type: 'sepia' },
    { name: '模糊', type: 'blur' },
    { name: '反色', type: 'invert' }
];

// 新增状态
const isRecognizing = ref(false);
const recognitionError = ref(null);

// 切换裁剪形状
const toggleCropShape = () => {
    cropAspectRatio.value = isNaN(cropAspectRatio.value) ? 1 : NaN;
    if (cropper.value) {
        cropper.value.setAspectRatio(cropAspectRatio.value);
    }
};

const textOptions = reactive({
    size: 30,
    color: '#000000',
    font: 'Arial'
});

const drawingState = reactive({
    isDrawing: false,
    lastX: 0,
    lastY: 0
});

// 图片编辑功能
const editImage = (index) => {
    currentEditingIndex.value = index;
    currentImageUrl.value = fileList.value[index].url;
    showEditModal.value = true;
    isEditing.value = false; // 初始为预览状态
    currentTool.value = null; // 初始不选择任何工具

    nextTick(() => {
        initEditor();
    });
};

// 初始化编辑器
const initEditor = () => {
    const imgElement = editImageRef.value;
    imgElement.src = currentImageUrl.value;

    imgElement.onload = () => {
        // 初始化裁剪器
        initCropper();

        // 初始化画布
        initCanvas();
    };
};

// 初始化裁剪器
const initCropper = () => {
    if (cropper.value) {
        cropper.value.destroy();
    }

    cropper.value = new Cropper(editImageRef.value, {
        aspectRatio: cropAspectRatio.value,
        viewMode: 1,
        autoCropArea: 0.8,
        movable: true,
        rotatable: true,
        scalable: true,
        zoomable: true,
        autoCrop: false, // 初始不显示裁剪框
        ready: () => {
            // 初始状态下禁用裁剪
            cropper.value.disable();
        }
    });
};

// 初始化画布
const initCanvas = () => {
    const canvasElement = canvas.value;
    const imgElement = editImageRef.value;

    canvasElement.width = imgElement.naturalWidth;
    canvasElement.height = imgElement.naturalHeight;

    const ctx = canvasElement.getContext('2d');
    ctx.drawImage(imgElement, 0, 0);
};

// 确认裁剪
const confirmCrop = () => {
    if (!cropper.value) return;

    const croppedCanvas = cropper.value.getCroppedCanvas();
    if (croppedCanvas) {
        // 更新画布
        const canvasElement = canvas.value;
        canvasElement.width = croppedCanvas.width;
        canvasElement.height = croppedCanvas.height;

        const ctx = canvasElement.getContext('2d');
        ctx.drawImage(croppedCanvas, 0, 0);

        // 更新当前图片URL
        currentImageUrl.value = croppedCanvas.toDataURL('image/jpeg');
        // isEditing.value = true;

        // 销毁裁剪器
        cropper.value.destroy();
        cropper.value = null;

        // 切换到画布编辑状态
        currentTool.value = null;
    }
};

function hideFirstCropper() {
    const isStyle = document.getElementById('cropper-hide-style');
    if (isStyle) {
        return;
    }
    const style = document.createElement('style');
    style.id = 'cropper-hide-style';
    style.innerHTML = `
        .cropper-container,
        .cropper-crop-box,
        .cropper-bg,
        .cropper-canvas,
        .cropper-drag-box,
        .cropper-face,
        .cropper-line,
        .cropper-point,
        .cropper-view-box {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
    `;
    document.head.appendChild(style);
}

function showFirstCropper() {
    const style = document.getElementById('cropper-hide-style');
    if (style) {
        style.remove();
    }
}

const confirmDrawing = () => {
    // 1. 更新预览
    updatePreview();

    // 2. 切换到默认状态（可选）
    currentTool.value = null;
    // isEditing.value = false;

    // 3. 隐藏画笔 UI（可选）
    hideFirstCropper();
};

// 实时更新预览函数
const updatePreview = () => {
    if (!canvas.value) return;

    // 如果是裁剪模式且cropper已初始化
    if (currentTool.value === 'crop' && cropper.value) {
        const croppedCanvas = cropper.value.getCroppedCanvas();
        if (croppedCanvas) {
            currentImageUrl.value = croppedCanvas.toDataURL('image/jpeg');
            return;
        }
    }

    // 其他情况直接使用canvas内容
    currentImageUrl.value = canvas.value.toDataURL('image/jpeg');
    // 隐藏画布
    hideFirstCropper();
};


// 设置当前工具
const setTool = (tool) => {
    currentTool.value = tool;

    if (tool === 'crop') {
        // 切换到裁剪模式
        isEditing.value = false; // 显示原图
        if (cropper.value) {
            // 显示画布
            showFirstCropper();
            cropper.value.enable(); // 启用裁剪
        } else {
            // 显示画布
            showFirstCropper();

            // 重新初始化 Cropper（确保 DOM 已更新）
            nextTick(() => {
                initCropper();
            });
        }

    } else {
        // 切换到其他工具
        isEditing.value = true; // 显示画布
        if (cropper.value) {
            cropper.value.disable(); // 禁用裁剪
        }

        // 隐藏画布
        hideFirstCropper();

        // 初始化画布
        initCanvas();
    }

    // 文字输入框处理
    if (tool === 'text') {
        showTextInput.value = true;
    } else {
        showTextInput.value = false;
    }

    // 初始化画笔
    if (tool === 'draw') {
        setupDrawing();
    }
};

// 添加文字到画布
const addTextToCanvas = () => {
    if (!textInput.value) return;

    const canvasElement = canvas.value;
    const ctx = canvasElement.getContext('2d');

    ctx.font = `${textOptions.size}px ${textOptions.font}`;
    ctx.fillStyle = textOptions.color;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    const x = canvasElement.width / 2;
    const y = canvasElement.height / 2;

    ctx.fillText(textInput.value, x, y);

    textInput.value = '';
    showTextInput.value = false;

    // 添加文字后立即更新预览
    updatePreview();

};

// 设置绘图功能
const setupDrawing = () => {
    const canvasElement = canvas.value;
    if (!canvasElement) return;

    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;

    // 清除旧事件
    canvasElement.onmousedown = null;
    canvasElement.onmousemove = null;
    canvasElement.onmouseup = null;
    canvasElement.onmouseout = null;

    const getCanvasPosition = (e) => {
        const rect = canvasElement.getBoundingClientRect();
        return {
            x: e.clientX - rect.left,
            y: e.clientY - rect.top
        };
    };

    canvasElement.onmousedown = (e) => {
        if (currentTool.value !== 'draw') return;

        isDrawing = true;
        const pos = getCanvasPosition(e);
        lastX = pos.x;
        lastY = pos.y;

        // 开始新的路径
        const ctx = canvasElement.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.strokeStyle = brushColor.value;
        ctx.lineWidth = brushSize.value;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
    };

    canvasElement.onmousemove = (e) => {
        if (!isDrawing || currentTool.value !== 'draw') return;

        const pos = getCanvasPosition(e);
        const x = pos.x;
        const y = pos.y;

        const ctx = canvasElement.getContext('2d');
        ctx.lineTo(x, y);
        ctx.stroke();

        lastX = x;
        lastY = y;
    };

    const endDrawing = () => {
        isDrawing = false;
    };

    canvasElement.onmouseup = endDrawing;
    canvasElement.onmouseout = endDrawing;
};

// 应用滤镜
const applyFilter = (filterType) => {
    const canvasElement = canvas.value;
    const ctx = canvasElement.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvasElement.width, canvasElement.height);
    const data = imageData.data;

    // 应用滤镜
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        switch (filterType) {
            case 'grayscale':
                const gray = 0.299 * r + 0.587 * g + 0.114 * b;
                data[i] = data[i + 1] = data[i + 2] = gray;
                break;
            case 'sepia':
                data[i] = Math.min(255, (r * 0.393) + (g * 0.769) + (b * 0.189));
                data[i + 1] = Math.min(255, (r * 0.349) + (g * 0.686) + (b * 0.168));
                data[i + 2] = Math.min(255, (r * 0.272) + (g * 0.534) + (b * 0.131));
                break;
            case 'invert':
                data[i] = 255 - r;
                data[i + 1] = 255 - g;
                data[i + 2] = 255 - b;
                break;
            case 'blur':
                // 更真实的模糊效果
                if (i > 4 && i < data.length - 8) {
                    data[i] = (data[i - 4] + data[i + 4] + data[i] + data[i - 4 * canvasElement.width] + data[i + 4 * canvasElement.width]) / 5;
                    data[i + 1] = (data[i - 3] + data[i + 5] + data[i + 1] + data[i - 3 * canvasElement.width] + data[i + 5 * canvasElement.width]) / 5;
                    data[i + 2] = (data[i - 2] + data[i + 6] + data[i + 2] + data[i - 2 * canvasElement.width] + data[i + 6 * canvasElement.width]) / 5;
                }
                break;
        }
    }

    ctx.putImageData(imageData, 0, 0);
    // 应用滤镜后立即更新预览
    updatePreview();
};


// 保存编辑后的图片
const saveEditedImage = () => {
    const canvasElement = canvas.value;
    canvasElement.toBlob((blob) => {
        // 获取当前编辑的图片的原始数据
        const originalFileItem = fileList.value[currentEditingIndex.value];
        // 创建新的 File 对象
        const editedFile = new File([blob], fileList.value[currentEditingIndex.value].file.name, {
            type: 'image/jpeg',
            lastModified: Date.now()
        });

        // 更新文件列表，保留所有元数据
        fileList.value[currentEditingIndex.value] = {
            ...originalFileItem, // 保留所有原有属性
            file: editedFile,     // 更新文件
            url: URL.createObjectURL(blob), // 更新预览URL

            // 重置识别状态
            isRecognizing: false,
            recognitionError: null
        };

        closeEditModal();
    }, 'image/jpeg', 0.9);
};

// 关闭编辑模态框
const closeEditModal = () => {
    showEditModal.value = false;
    currentTool.value = null;
    if (cropper.value) {
        cropper.value.destroy();
        cropper.value = null;
    }
};

onMounted(async () => {
    let res = await api.getUserInfo({ userid: store.state.userid });
    // console.log(res);
    if (res.code === 200) {
        info.name = res.data[0].name;
        info.avatar = res.data[0].avatar_url;
    }
    res = await api.getUserShuoShuo({ userid: store.state.userid });
    if (res.code === 200) {
        info.shuoshuo_count = res.data.length;
    }
})

// 处理文件上传
const handleFileUpload = async (event) => {
    const files = event.target.files;
    for (let i = 0; i < files.length; i++) {
        if (fileList.value.length >= 9) {
            alert("最多只能上传9张图片");
            break;
        }
        const file = files[i];
        const reader = new FileReader();
        reader.onload = async (e) => {
            // 创建完整的响应式对象
            const fileItem = reactive({
                file,
                url: e.target.result,
                tags: [],
                isRecognizing: true,
                recognitionError: null
            });
            fileList.value.push(fileItem);

            try {
                // 调用百度AI识别
                const tags = await recognizeWithBaiduAI(file);
                fileItem.tags = tags;
                fileItem.isRecognizing = false;

            } catch (error) {
                console.error('图片识别失败:', error);
                fileItem.isRecognizing = false;
                fileItem.recognitionError = '识别失败';
            }
        };
        reader.readAsDataURL(file);
    }
};


const recognizeWithBaiduAI = async (file) => {
    try {
        const accessToken = await getBaiduAIToken();
        const base64Image = await fileToBase64(file);

        // 百度AI高级图像识别接口
        const response = await axios.post('https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general', {
            image: base64Image
        }, {
            params: { access_token: accessToken },
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        });

        // 解析返回结果
        if (response.data.error_code) {
            console.error('百度AI识别错误:', response.data.error_msg);
            return [];
        }

        // 提取识别结果中的标签，按置信度排序
        return response.data.result
            .sort((a, b) => b.score - a.score)
            .map(item => item.keyword)
            .slice(0, 5); // 取前5个标签

    } catch (error) {
        console.error('图片识别失败:', error);
        return [];
    }
};

async function fileToBase64(file) {
    return new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = (e) => resolve(e.target.result.split(',')[1]);
        reader.readAsDataURL(file);
    });
}

const getBaiduAIToken = async () => {
    // 自己的API Key和Secret Key
    // const API_KEY = 'Ht5v3zef7Svzy0mHdNGzfgdq';
    // const SECRET_KEY = 'RJSw6vY3iuU8qFOI4x8E4osPpzyCZ0ZA';

    // 检查本地存储中是否有有效的token
    const cachedToken = localStorage.getItem('baidu_ai_token');
    const cachedExpire = localStorage.getItem('baidu_ai_token_expire');

    if (cachedToken && cachedExpire && Date.now() < parseInt(cachedExpire)) {
        return cachedToken;
    }

    // 获取新的token
    try {
        const response = await api.getBaiduToken();
        // console.log(response)
        const { access_token, expires_in } = response;

        // 缓存token，有效期通常为30天，但我们会提前1小时刷新
        const expireTime = Date.now() + (expires_in * 1000) - (60 * 60 * 1000);
        localStorage.setItem('baidu_ai_token', access_token);
        localStorage.setItem('baidu_ai_token_expire', expireTime.toString());

        return access_token;
    } catch (error) {
        console.error('获取百度AI Token失败:', error);
        throw new Error('无法获取图像识别服务授权');
    }
};

// 删除图片
const removeImage = (index) => {
    fileList.value.splice(index, 1);
}

// 上传图片到服务器，发布说说
const uploadImages = () => {
    // console.log('上传图片', fileList.value);
    const formData = new FormData();
    fileList.value.forEach((file, index) => {
        formData.append('image', file.file);
    });


    // 先通过用户id获取用户信息
    api.getUserInfo({ userid: store.state.userid }).then(res => {
        // console.log(res.data[0])
        let { id } = res.data[0];

        // console.log(result.shuoshuo_id)

        api.uploadShuoShuoFile(formData).then(async response => {
            if (response.code !== 200) {
                console.error('图片上传失败', response);
                ElMessage.error(response.message || '图片上传失败');
                return;
            }
            console.log('图片上传成功', response);

            // 需要u_id,text_content,u_avatar_url.u_name
            const result = await api.insertShuoShuo({ u_id: id, text_content: content.value });
            // 清空 fileList
            fileList.value = [];

            // 插入到数据库
            response.files.forEach(file => {
                api.insertShuoShuoImage({ shuoshuo_id: result.shuoshuo_id, img_url: `http://localhost:3000/images/shuoshuo/${file.filename}`, u_id: id }).then(res => {
                    console.log('图片插入成功', res);
                }).catch(error => {
                    console.error('图片插入失败', error);
                });
            });

            ElMessage({
                message: '发布说说成功',
                type: 'success',
            })
            content.value = '';
        }).catch(error => {
            console.error('图片上传失败', error);
            ElMessage.error('图片上传失败');
        });


    })

}

</script>

<style lang="less" scoped>
.container {
    background-color: white;
    width: 1100px;
    margin: 0 auto;
    margin-top: 30px;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 30px;

    .row {
        border-bottom: 1px solid #ddd;
        margin-bottom: 30px;

        .title {
            font-weight: bold;
            padding-bottom: 10px;
            color: #295cb6;
            width: 65px;
            border-bottom: 3px solid#295cb6;
        }
    }

    .box {
        display: flex;

        .left {
            flex: 2;

            .content {
                width: 90%;
                height: 60px;
                border: 1px solid #ddd;
                resize: none;
                margin-bottom: 10px;
            }

            .preview-container {
                margin-bottom: 10px;

                .preview-item {
                    display: inline-block;
                    margin: 5px;
                    position: relative;

                    .preview-img {
                        width: 200px;
                        height: 200px;
                        object-fit: cover;

                        cursor: pointer;
                        transition: transform 0.2s;

                        &:hover {
                            transform: scale(1.05);
                        }
                    }

                    .delete-btn {
                        position: absolute;
                        top: 5px;
                        right: 5px;
                        background-color: #ff4d4f;
                        color: white;
                        border: none;
                        padding: 5px;
                        cursor: pointer;
                    }

                    // .edit-btn {
                    //     position: absolute;
                    //     bottom: 5px;
                    //     left: 5px;
                    //     background-color: #295cb6;
                    //     color: white;
                    //     border: none;
                    //     padding: 5px;
                    //     cursor: pointer;
                    // }
                }
            }

            .file-input {
                /* 隐藏文件输入框 */
                display: none;
            }

            .file-label {
                cursor: pointer;
                width: 9%;
                height: 60px;
                background-color: #f5f5f5;
                float: right;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }
        }

        .right {
            flex: 1;
            box-sizing: border-box;
            padding-left: 50px;

            .info {
                display: flex;
                padding-bottom: 20px;
                border-bottom: 1px solid #ddd;

                .avatar {
                    width: 100px;
                    height: 100px;
                    margin: 0 20px 0 40px;
                }

                .name {
                    font-weight: bold;
                    margin-top: 10px;
                }

                .desc {
                    margin-top: 5px;
                }
            }

            .tip1 {
                padding: 0 30px;
                border-bottom: 1px solid #ddd;

                .p1 {
                    margin: 15px 0;
                }

                .p2 {
                    line-height: 1.2;
                    font-size: 14px;
                    color: #999;
                }

                .p3 {
                    font-size: 14px;
                    color: #295c9d;
                    margin-top: 5px;
                    margin-bottom: 20px;
                }
            }

            .tip2 {
                padding: 0 30px;

                .p1 {
                    margin: 15px 0;
                    color: #295c9d;
                    font-size: 14px;
                }

                .p2,
                .p3 {
                    color: #999;
                    font-size: 14px;
                }
            }

        }
    }


}

.image-edit-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    .modal-content {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        width: 90%;
        max-width: 1200px;
        max-height: 90vh;
        overflow: auto;

        .edit-area {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;

            .preview-container {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #f5f5f5;
                padding: 20px;
                border-radius: 4px;

                .preview-image {
                    max-width: 100%;
                    max-height: 400px;
                    object-fit: contain;
                }
            }

            .edit-container {
                flex: 2;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #f5f5f5;
                padding: 20px;
                border-radius: 4px;
                overflow: auto;

                .edit-canvas {
                    max-width: 100%;
                    max-height: 500px;
                    background-color: white;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                }
            }
        }

        .toolbar {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;

            .tool-options {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
            }

            .action-buttons {
                display: flex;
                gap: 10px;
            }

            button {
                padding: 8px 15px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                transition: all 0.2s;

                &.active {
                    background-color: #295cb6;
                    color: white;
                }

                &.save-btn {
                    background-color: #52c41a;
                    color: white;
                }

                &.cancel-btn {
                    background-color: #f5222d;
                    color: white;
                }

                &.reset-btn {
                    background-color: #faad14;
                    color: white;
                }
            }
        }

        .text-input-container {
            margin-top: 15px;
            padding: 15px;
            background-color: #f5f5f5;
            border-radius: 4px;

            .text-input {
                width: 100%;
                padding: 8px;
                margin-bottom: 10px;
                border: 1px solid #ddd;
                border-radius: 4px;
            }

            .text-options {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 10px;
                flex-wrap: wrap;
            }

            .confirm-btn {
                background-color: #52c41a;
                color: white;
                padding: 8px 15px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                transition: all 0.2s;
                margin-right: 10px;
            }

            .cancel-btn {
                background-color: #f5222d;
                color: white;
                padding: 8px 15px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                transition: all 0.2s;
            }

        }

        .draw-options,
        .filter-options {
            margin-top: 15px;
            padding: 15px;
            background-color: #f5f5f5;
            border-radius: 4px;

            .option-group {
                display: flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 10px;
            }

            button {
                margin-right: 10px;
                margin-bottom: 10px;
                padding: 6px 12px;

                &.active {
                    background-color: #295cb6;
                    color: white;
                }
            }
        }
    }
}

.preview-area {
    margin-bottom: 15px;
    text-align: center;

    .preview-image {
        max-width: 100%;
        max-height: 200px;
        border: 1px solid #ddd;
    }
}

/* 新增标签样式 */
.tags-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}


/* 识别状态提示 */
.recognition-status {
    margin: 10px 0;
    font-size: 14px;

    &.loading {
        color: #1890ff;
    }

    &.error {
        color: #f5222d;
    }
}

.recognition-status {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px;
    text-align: center;
    font-size: 12px;
}

.recognition-error {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 0, 0, 0.7);
    color: white;
    padding: 5px;
    text-align: center;
    font-size: 12px;
}

.tag {
    position: relative;
    background: #295cb6;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 12px;
    margin-right: 5px;
    display: inline-block;
    margin-bottom: 3px;

    .tag-remove {
        margin-left: 3px;
        cursor: pointer;
        font-size: 14px;

        &:hover {
            color: #ff4d4f;
        }
    }
}
</style>